<template>
  <div id="main">
    <div class="head">
      <img src="@/assets/images/logo-head.png">
    </div>
    <div class="nav">
      <el-menu :default-active="activeIndex" mode="horizontal" @select="handleSelect">
        <el-menu-item index="1" @click="redirectTologin">首页</el-menu-item>
        <el-menu-item index="2" @click="goTo('/inancial_product')">金融服务</el-menu-item>
        <el-submenu index="3">
          <template slot="title">供需对接</template>
          <el-menu-item index="3-1" @click="goTo('/reqmarket')">需求市场</el-menu-item>
          <el-menu-item index="3-2" @click="goTo('/rspmarket')">供应市场</el-menu-item>
        </el-submenu>
        <el-menu-item index="4" @click="goTo('/example')">看样学样</el-menu-item>
        <el-menu-item index="5" @click="goTo('/digitalLevel')">数字化水平评测</el-menu-item>
        <el-menu-item index="6">数字化转型培训</el-menu-item>
        <el-menu-item index="7">saas化服务</el-menu-item>
<!--        <el-submenu index="7">
          <template slot="title">saas化服务</template>
          <el-menu-item index="7-1" @click="goTo('/saas_product')">免费服务</el-menu-item>
          <el-menu-item index="7-2" @click="goTo('/saas_login')">综合服务</el-menu-item>
        </el-submenu>-->
        <el-menu-item index="8" @click="redirectToblogin">
          <i class="el-icon-user"></i>
          <span slot="title">管理端登录</span>
        </el-menu-item>
      </el-menu>
    </div>
    <div class="saas">
      <div class="saas-top">
        <el-row class="JNPF-common-search-box" :gutter="24">
          <el-form @submit.native.prevent>
            <el-col :span="9">
              <el-form-item label="产品名称">
                <el-input v-model="query.name" placeholder="请输入" clearable></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="9">
              <el-form-item label="产品类别">
                <JnpfCascader v-model="query.producttype" placeholder="请选择" :options="producttypeOptions"
                  :props="producttypeProps" clearable />
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item>
                <el-button type="primary" icon="el-icon-search" @click="search()">查询</el-button>
                <el-button icon="el-icon-refresh-right" @click="reset()">重置</el-button>
              </el-form-item>
            </el-col>
          </el-form>
        </el-row>
      </div>
      <div class="saas-center">
        <el-empty v-if="total === 0" description="暂无数据"></el-empty>
        <div v-else v-for="item in list" :key="item.id" class="saas-main">
          <a @click="goDetail(item.id)" class="saas-list">
            <div class="saas-left">
              <img v-if="!item.pic && item.softtype === '大众免费使用'" src="@/assets/images/saas1.png" />
              <img v-if="!item.pic && item.softtype === '购买使用'" src="@/assets/images/saas2.png" />
              <!--              部署的话改成'/cloud-api'-->
              <img v-if="item.pic"  :src="'/cloud-api'+ item.pic[0].url" />
            </div>
            <div class="saas-right">
              <div class="saas-name">{{ item.name }}</div>
              <div class="saas-type">产品类型：{{ item.producttype }}</div>
              <div class="saas-des">{{ item.description }}</div>
              <div class="saas-user">提供方：{{ item.companyname }}</div>
              <div class="saas-download-click">
                <div class="saas-click">下载次数：{{ item.clickNum }} 次</div>
                <div class="saas-download">
                  <el-button type="primary" @click.stop="clickDownload(item)">立即下载</el-button>
                </div>
              </div>
            </div>
          </a>
        </div>
        <pagination :total="total" :page.sync="listQuery.currentPage" :limit.sync="listQuery.pageSize"
          @pagination="initData" :pageSizes="[5]" />
        <JNPF-Form v-if="formVisible" ref="JNPFForm" @refresh="refresh" />
        <ExportBox v-if="exportBoxVisible" ref="ExportBox" @download="download" />


        <ImportBox v-if="uploadBoxVisible" ref="UploadBox" @refresh="initData" />
        <Detail v-if="detailVisible" ref="Detail" @refresh="refresh" />
        <ToFormDetail v-if="toFormDetailVisible" ref="toFormDetail" @close="toFormDetailVisible = false" />
        <SuperQuery v-if="superQueryVisible" ref="SuperQuery" :columnOptions="superQueryJson"
          @superQuery="superQuery" />
      </div>
    </div>
    <div class="footer">
      <div class="footer-main">
        <div class="footer-left">
          <img src="@/assets/images/logo.png" />
        </div>
        <div class="footer-mid">
          <div class="mid1">
            福州市中小企业数字化转型公共服务平台
          </div>
          <div class="mid2">
            <div class="mid-info">地址：仓山区南江滨西大道193号东部商务办公区5号楼6层</div>
            <div class="mid-info">电话：(0591)83258525</div>
            <a href="/" target="_blank">关于我们</a>
          </div>
          <div class="mid3">
            <div class="mid-info">工作时间：8:30-18:00（工作日）</div>
            <div class="mid-info">邮箱：fzzxqyfw@163.com</div>
            <a href="/" target="_blank">联系我们</a>
          </div>
        </div>
        <div class="footer-right">
          <img src="@/assets/images/ewm.jpg" />
          <label>扫码关注公众号</label>
        </div>
      </div>
    </div>
  </div>
</template>

<script>

import request from '@/utils/request'
import { mapGetters } from "vuex";
import { getDictionaryDataSelector } from '@/api/systemData/dictionary'
import JNPFForm from './form'
import Detail from './Detail'
import ExportBox from '@/components/ExportBox'
import ToFormDetail from '@/views/basic/dynamicModel/list/detail'
import { getDataInterfaceRes } from '@/api/systemData/dataInterface'
import { getConfigData } from '@/api/onlineDev/visualDev'
import { getDefaultCurrentValueUserIdAsync } from '@/api/permission/user'
import { getDefaultCurrentValueDepartmentIdAsync } from '@/api/permission/organize'
import columnList from './columnList'
import { thousandsFormat } from "@/components/Generator/utils/index"
import SuperQuery from '@/components/SuperQuery'
import superQueryJson from './superQueryJson'
import { getDownloadUrl, getPackDownloadUrl } from "@/api/common";
import axios from "axios";

export default {
  components: {
    JNPFForm,
    Detail,
    ExportBox, ToFormDetail, SuperQuery
  },
  data() {
    return {
      activeIndex: '7-1',
      keyword: '',
      expandsTree: true,
      refreshTree: true,
      toFormDetailVisible: false,
      expandObj: {},
      columnOptions: [],
      mergeList: [],
      exportList: [],
      columnList,

      showAll: false,
      superQueryVisible: false,
      superQueryJson,
      uploadBoxVisible: false,
      detailVisible: false,
      query: {
        name: undefined,
        softtype: ["1"],
        producttype: undefined,
        os: undefined,
        description: undefined,
        downloadmethod: undefined,
        url: undefined,
        phone: undefined,
        email: undefined,
        status: undefined,
      },
      treeProps: {
        children: 'children',
        label: 'fullName',
        value: 'id',
        isLeaf: 'isLeaf'
      },
      list: [],
      listLoading: true,
      total: 0,
      queryData: {},
      listQuery: {
        superQueryJson: '',
        currentPage: 1,
        pageSize: 5,
        sort: "desc",
        sidx: "",
      },
      formVisible: false,
      flowVisible: false,
      flowListVisible: false,
      flowList: [],
      exportBoxVisible: false,
      softtypeOptions: [{ "fullName": "大众免费使用", "id": "1" }, { "fullName": "购买使用", "id": "2" }],
      softtypeProps: { "label": "fullName", "value": "id" },
      producttypeOptions: [{
        "children": [{ "fullName": "CAD", "id": "1-1" }, {
          "fullName": "CAE",
          "id": "1-2"
        }, { "fullName": "CAPP", "id": "1-3" }, { "fullName": "CAM", "id": "1-4" }, { "fullName": "数字孪生", "id": "1-5" }],
        "fullName": "研发制造",
        "id": "1"
      }, {
        "children": [{ "fullName": "PLM", "id": "2-1" }, { "fullName": "PDM", "id": "2-2" }, {
          "fullName": "DNC",
          "id": "2-3"
        }, { "fullName": "MDC", "id": "2-4" }, { "fullName": "QMC", "id": "2-5" }, {
          "fullName": "LIMS",
          "id": "2-6"
        }, { "fullName": "MES", "id": "2-7" }, { "fullName": "APS", "id": "2-8" }], "fullName": "生产制造", "id": "2"
      }, {
        "children": [{ "fullName": "ERP", "id": "3-1" }, { "fullName": "CRM", "id": "3-2" }, {
          "fullName": "SRM",
          "id": "3-3"
        }, { "fullName": "SCM", "id": "3-4" }, { "fullName": "OA", "id": "3-5" }, {
          "fullName": "BI",
          "id": "3-6"
        }, { "fullName": "FMIS", "id": "3-7" }, { "fullName": "BOM", "id": "3-8" }, {
          "fullName": "WMS",
          "id": "3-9"
        }, { "fullName": "MRP", "id": "3-10" }], "fullName": "经营管理", "id": "3"
      }, {
        "children": [{ "fullName": "监控系统", "id": "4-1" }, { "fullName": "日志管理系统", "id": "4-2" }, {
          "fullName": "故障管理系统",
          "id": "4-3"
        }, { "fullName": "安全管理系统", "id": "4-4" }], "fullName": "运维服务", "id": "4"
      }, { "fullName": "其他", "id": "5" }],
      producttypeProps: { "label": "fullName", "value": "id", "children": "children" },
      osOptions: [{ "fullName": "Windows", "id": "Windows" }, { "fullName": "macOS", "id": "macOS" }, {
        "fullName": "Linux",
        "id": "Linux"
      }, { "fullName": "Android", "id": "Android" }, { "fullName": "iOS", "id": "iOS" }, {
        "fullName": "RTOS",
        "id": "RTOS"
      }, { "fullName": "其他", "id": "other" }],
      osProps: { "label": "fullName", "value": "id" },
      downloadmethodOptions: [{ "fullName": "超链接", "id": "Link" }, { "fullName": "安装包下载", "id": "Installer" }],
      downloadmethodProps: { "label": "fullName", "value": "id" },
      statusOptions: [{ "fullName": "草稿", "id": "0" }, { "fullName": "处理", "id": "1" }, {
        "fullName": "通过",
        "id": "2"
      }, { "fullName": "驳回", "id": "3" }, { "fullName": "撤销", "id": "4" }, {
        "fullName": "终止",
        "id": "5"
      }, { "fullName": "不通过", "id": "6" }],
      statusProps: { "label": "fullName", "value": "id" },
      interfaceRes: {},
    }
  },
  computed: {
    ...mapGetters(['userInfo']),
    menuId() {
      return this.$route.meta.modelId || ''
    }
  },
  created() {
    this.getColumnList(),
      this.initSearchDataAndListData()
    this.queryData = JSON.parse(JSON.stringify(this.query))
  },
  methods: {
    clickDownload(item) {
      if (item.downloadmethod === '超链接') {
        // 打开新的标签页，并在其中加载Google首页
        window.open(item.url, '_blank');
      } else {
        //原有单个下载
        if (!item.fpackage[0].fileId) return
        getDownloadUrl('annex', item.fpackage[0].fileId).then(res => {
          this.jnpf.downloadFile(res.data.url, item.fpackage[0].name)
        })
      }
      //记录下载次数
      this.recordDownloads(item);
    },
    recordDownloads(item) {
      const url = `/cloud-api2/portal/saasInsertrecordDownloads?saasId=${item.id}&type=${item.downloadmethod}&user=${this.userInfo.userId}`;
      axios.get(url).then(res => {
        this.initData();
      })
    },
    handleSelect(key, keyPath) {
    },
    redirectTologin() {
      this.$router.push({ path: '/login', query: { redirect: '/' } });
    },
    redirectToblogin() {
      const token = localStorage.getItem('jnpf_token');
      if (token) {
        this.$router.push("/home");
      } else {
        window.open("/blogin");
      }
    },
    goTo(path) {
      this.$router.push(path);
    },
    toDetail(defaultValue, modelId) {
      if (!defaultValue) return
      getConfigData(modelId).then(res => {
        if (!res.data || !res.data.formData) return
        let formData = JSON.parse(res.data.formData)
        formData.popupType = 'general'
        this.toFormDetailVisible = true
        this.$nextTick(() => {
          this.$refs.toFormDetail.init(formData, modelId, defaultValue)
        })
      })
    },
    toggleTreeExpand(expands) {
      this.refreshTree = false
      this.expandsTree = expands
      this.$nextTick(() => {
        this.refreshTree = true
        this.$nextTick(() => {
          this.$refs.treeBox.setCurrentKey(null)
        })
      })
    },
    filterNode(value, data) {
      if (!value) return true;
      return data[this.treeProps.label].indexOf(value) !== -1;
    },
    loadNode(node, resolve) {
      const nodeData = node.data
      const config = {
        treeInterfaceId: "",
        treeTemplateJson: []
      }
      if (config.treeInterfaceId) {
        //这里是为了拿到参数中关联的字段的值，后端自行拿
        if (config.treeTemplateJson && config.treeTemplateJson.length) {
          for (let i = 0; i < config.treeTemplateJson.length; i++) {
            const element = config.treeTemplateJson[i];
            element.defaultValue = nodeData[element.relationField] || ''
          }
        }
        //参数
        let query = {
          paramList: config.treeTemplateJson || [],
        }
        //接口
        getDataInterfaceRes(config.treeInterfaceId, query).then(res => {
          let data = res.data
          if (Array.isArray(data)) {
            resolve(data);
          } else {
            resolve([]);
          }
        })
      }
    },
    getColumnList() {
      // 没有开启权限
      this.columnOptions = this.transformColumnList(this.columnList)
    },
    transformColumnList(columnList) {
      let list = []
      for (let i = 0; i < columnList.length; i++) {
        const e = columnList[i];
        if (!e.prop.includes('-')) {
          list.push(e)
        } else {
          let prop = e.prop.split('-')[0]
          let label = e.label.split('-')[0]
          let vModel = e.prop.split('-')[1]
          let newItem = {
            align: "center",
            jnpfKey: "table",
            prop,
            label,
            children: []
          }
          e.vModel = vModel
          if (!this.expandObj.hasOwnProperty(`${prop}Expand`)) this.$set(this.expandObj, `${prop}Expand`, false)
          if (!list.some(o => o.prop === prop)) list.push(newItem)
          for (let i = 0; i < list.length; i++) {
            if (list[i].prop === prop) {
              list[i].children.push(e)
              break
            }
          }
        }
      }
      this.getMergeList(list)
      this.getExportList(list)
      return list
    },
    arraySpanMethod({ column }) {
      for (let i = 0; i < this.mergeList.length; i++) {
        if (column.property == this.mergeList[i].prop) {
          return [this.mergeList[i].rowspan, this.mergeList[i].colspan]
        }
      }
    },
    getMergeList(list) {
      let newList = JSON.parse(JSON.stringify(list))
      newList.forEach(item => {
        if (item.children && item.children.length) {
          let child = {
            prop: item.prop + '-child-first'
          }
          item.children.unshift(child)
        }
      })
      newList.forEach(item => {
        if (item.children && item.children.length) {
          item.children.forEach((child, index) => {
            if (index == 0) {
              this.mergeList.push({
                prop: child.prop,
                rowspan: 1,
                colspan: item.children.length
              })
            } else {
              this.mergeList.push({
                prop: child.prop,
                rowspan: 0,
                colspan: 0
              })
            }
          })
        } else {
          this.mergeList.push({
            prop: item.prop,
            rowspan: 1,
            colspan: 1
          })
        }
      })
    },
    getExportList(list) {
      let exportList = []
      for (let i = 0; i < list.length; i++) {
        if (list[i].jnpfKey === 'table') {
          for (let j = 0; j < list[i].children.length; j++) {
            exportList.push(list[i].children[j])
          }
        } else {
          exportList.push(list[i])
        }
      }
      this.exportList = exportList
    },
    goDetail(id) {
      this.detailVisible = true
      this.$nextTick(() => {
        this.$refs.Detail.init(id)
      })
    },
    sortChange({ column, prop, order }) {
      this.listQuery.sort = order == 'ascending' ? 'asc' : 'desc'
      this.listQuery.sidx = !order ? '' : prop
      this.initData()
    },
    async initSearchDataAndListData() {
      await this.initSearchData()
      this.initData()
    },
    //初始化查询的默认数据
    async initSearchData() {
    },
    initData() {
      this.listLoading = true;
      let _query = {
        ...this.listQuery,
        ...this.query,
        keyword: this.keyword,
        dataType: 0,
        menuId: this.menuId,
        moduleId: '552108036190111685',
        type: 1,
      };
      request({
        url: `/api/example/Fz_saas_product/getList`,
        method: 'post',
        data: _query
      }).then(res => {
        var _list = res.data.list;
        this.list = _list.map(o => ({
          ...o,
          ...this.expandObj,
        }))
        this.total = res.data.pagination.total
        this.listLoading = false
      })
    },
    handleDel(id) {
      this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
        type: 'warning'
      }).then(() => {
        request({
          url: `/api/example/Fz_saas_product/${id}`,
          method: 'DELETE'
        }).then(res => {
          this.$message({
            type: 'success',
            message: res.msg,
            onClose: () => {
              this.initData()
            }
          });
        })
      }).catch(() => {
      });
    },
    handelUpload() {
      this.uploadBoxVisible = true
      this.$nextTick(() => {
        this.$refs.UploadBox.init("", "example/Fz_saas_product")
      })
    },
    openSuperQuery() {
      this.superQueryVisible = true
      this.$nextTick(() => {
        this.$refs.SuperQuery.init()
      })
    },
    superQuery(queryJson) {
      this.listQuery.superQueryJson = queryJson
      this.listQuery.currentPage = 1
      this.initData()
    },
    addOrUpdateHandle(row, isDetail) {
      let id = row ? row.id : ""
      this.formVisible = true
      this.$nextTick(() => {
        this.$refs.JNPFForm.init(id, isDetail, this.list)
      })
    },
    exportData() {
      this.exportBoxVisible = true
      this.$nextTick(() => {
        this.$refs.ExportBox.init(this.exportList)
      })
    },
    download(data) {
      let query = { ...data, ...this.listQuery, ...this.query, menuId: this.menuId }
      request({
        url: `/api/example/Fz_saas_product/Actions/Export`,
        method: 'post',
        data: query
      }).then(res => {
        if (!res.data.url) return
        this.jnpf.downloadFile(res.data.url)
        this.$refs.ExportBox.visible = false
        this.exportBoxVisible = false
      })
    },
    search() {
      this.listQuery.currentPage = 1
      this.listQuery.pageSize = 5
      this.listQuery.sort = "desc"
      this.listQuery.sidx = ""
      this.initData()
    },
    refresh(isrRefresh) {
      this.formVisible = false
      if (isrRefresh) this.reset()
    },
    reset() {
      this.query = JSON.parse(JSON.stringify(this.queryData))
      this.search()
    },
    colseFlow(isrRefresh) {
      this.flowVisible = false
      if (isrRefresh) this.reset()
    },
  }
}
</script>
<style lang="scss" scoped>
#main {
  width: 100%;
  background: #F0F4F9;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-template-rows: 0.2fr 0.2fr auto 0.8fr;
  gap: 0px 0px;
  grid-template-areas:
    "head head head head"
    "nav nav nav nav"
    "saas saas saas saas"
    "footer footer footer footer";
}

.head {
  grid-area: head;
  width: 1200px;
  flex-direction: row;
  display: flex;
  margin: 20px auto;

  img {
    height: 60px;
    width: auto;
  }
}

.el-menu--horizontal .el-menu--popup,
.el-menu--popup .el-menu-item {
  background: #1890FF;
  color: #FFFFFF;
  font-weight: bold;
}

.nav {
  grid-area: nav;
  display: flex;
  background: linear-gradient(90deg, #1890FF 50%, #3FB9F1 100%);

  a {
    text-decoration: none;
  }

  .el-menu {
    width: 1200px;
    margin: 0 auto;
    display: flex;
    border: none !important;
    background: none !important;
  }

  .el-menu li:last-child {
    position: absolute;
    right: 0;
  }

  .el-dropdown-menu__item,
  .el-menu-item {
    padding: 0 25px !important;
  }

  .el-menu--horizontal .el-menu .el-menu-item,
  .el-menu--horizontal .el-menu-item,
  .el-menu-item i,
  ::v-deep .el-submenu__title,
  ::v-deep .el-submenu__title i {
    color: #FFFFFF;
    font-weight: bold;
  }

  .el-menu--horizontal .el-menu-item.is-active,
  .el-menu--horizontal .el-menu-item:hover,
  .el-menu--horizontal .el-menu-item:focus {
    color: #303132 !important;
    border-bottom: 2px solid #1890FF !important;
    font-weight: bold;
  }

  .el-menu--horizontal .el-menu-item.is-active i,
  .el-menu--horizontal .el-menu-item:hover i,
  .el-menu--horizontal .el-menu-item:focus i {
    color: #303132 !important;
    font-weight: bold;
  }

  .el-menu--horizontal .el-menu-item,
  .el-menu-item i,
  .el-submenu__title,
  .el-submenu {
    color: #FFFFFF !important;
    font-weight: bold;
  }

  .el-menu--horizontal .el-menu-item.is-active,
  .el-menu--horizontal .el-menu-item:hover,
  .el-menu--horizontal .el-menu-item:focus,
  .el-submenu--horizontal.is-opened>.el-submenu__title {
    color: #303132 !important;
    border-bottom: 2px solid #1890FF !important;
    font-weight: bold;
  }

  .el-menu--horizontal .el-menu-item.is-active i,
  .el-menu--horizontal .el-menu-item:hover i,
  .el-menu--horizontal .el-menu-item:focus i,
  .el-submenu--horizontal.is-opened>.el-submenu__title i {
    color: #303132 !important;
    font-weight: bold;
  }
}

.saas {
  grid-area: saas;

  .saas-top {
    margin: 20px auto;
    width: 1200px;


    .el-row {
      margin: 0px !important;
      box-shadow: 0px 2px 6px 0px rgba(0, 0, 0, .4);
      border: 1px solid #3eb8f1;
      border-radius: 5px;
      height: 80px;
      padding-top: 20px;
      width: 100%;

      ::v-deep .el-form-item__label {
        font-weight: bold;
      }
    }
  }

  .saas-center {
    margin: 20px auto;
    width: 1200px;
    background-color: #FFFFFF;
    box-shadow: 0px 2px 6px 0px rgba(0, 0, 0, 0.4);
    border: 1px solid #3EB8F1;
    border-radius: 5px;
    padding: 30px 40px;

    ::v-deep .el-pagination__sizes {
      display: none;
    }

    .saas-main {
      .saas-list {
        display: flex;
        flex-direction: row;
        padding: 10px 20px;
        text-decoration: none;
        box-shadow: 0 0 5px rgba(24, 144, 255, 0.4);
        border: 1px solid #BBBBBB;
        cursor: pointer;
        margin-bottom: 20px;

        &:hover {
          transform: translateY(-5px);
          box-shadow: 0px 5px 8px 5px rgba(24, 144, 255, 0.5);
        }

        &:hover .saas-name {
          color: #1890FF !important;
        }


        .saas-left {
          padding: 15px 15px 15px 0px;
          display: flex;
          align-items: center;
          margin-right: 10px;
          border-right: 1px #3EB8F1 solid;

          img {
            border-radius: 10px;
            width: 200px;
            height: auto;
            max-height: 150px;
          }
        }

        .saas-right {
          width: calc(100% - 220px);
          display: flex;
          flex-direction: column;
          padding: 10px;

          .saas-name {
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            color: #101010;
            font-size: 16px;
            font-weight: bold;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 1;
            height: 30px;
          }

          .saas-type {
            font-size: 13px;
            color: #101010;
            line-height: 25px;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 1;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
          }

          .saas-des {
            height: 75px;
            font-size: 13px;
            color: #101010;
            line-height: 25px;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 3;
            overflow: hidden;
          }

          .saas-user {
            font-size: 13px;
            color: #101010;
            line-height: 25px;
          }

          .saas-download-click {
            display: flex;
            flex-direction: row;
            position: relative;
            line-height: 25px;

            .saas-click {
              font-size: 13px;
              color: #101010;
            }

            .saas-download {
              position: absolute;
              right: 0;
              bottom: 0;
            }
          }
        }
      }
    }

    .cen-top {
      font-size: 32px;
      font-weight: 700;
      text-align: center;
      color: #000;
    }

    .tit_sec {
      font-weight: 400;
      text-align: center;
      font-size: 12px;
      color: #ccc;
      margin-bottom: 8px;
    }

    .tit_hr {
      width: 300px;
      height: 2px;
      margin: 10px auto;
      display: flex;

      .tit_red {
        width: 150px;
        height: 3px;
        background-color: #1890FF;
      }

      .tit_blue {
        width: 150px;
        height: 3px;
        background-color: #1890FF;
      }
    }

    .cen_con {
      font-size: 16px;
      font-weight: 400;
      margin-top: 30px;
      line-height: 28px;
      text-align: justify;
      text-indent: 2em;
    }

    .btn_list {
      height: 150px;
      margin-top: 50px;
      margin-bottom: 90px;
      display: flex;

      .btn_fir {
        width: 380px;
        height: 100%;
        margin: auto;
        border-radius: 30px;
        transform: translateY(-5px);
        box-shadow: 0px 4px 8px 5px rgba(0, 0, 0, 0.15);

        .link-i,
        i {
          width: 20%;
          font-size: 50px;
          font-weight: bold;
        }

        &:hover {
          transform: translateY(-15px);
          box-shadow: 0px 10px 8px 5px rgba(24, 144, 255, 0.5);
        }

        &:first-child {
          background: linear-gradient(to right, #034373, #1890FF);
        }

        &:last-child {
          background: linear-gradient(to right, #1890FF, #3EB8F1);
        }

        a {
          width: 100%;
          height: 100%;
          text-decoration: none;
          display: flex;
          flex-direction: row;
          align-items: center;
          justify-content: center;
          color: #FFFFFF;
        }

        .link-text {
          font-size: 30px;
          font-family: 黑体;
          font-weight: bold;
        }
      }
    }
  }
}

.footer {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr;
  gap: 0px 0px;
  grid-template-areas:
    "footer-main";
  grid-area: footer;
  background: #073C76;
}

.footer-main {
  display: grid;
  grid-template-columns: 0.3fr 2.4fr 0.3fr;
  grid-template-rows: 1fr;
  gap: 0px 20px;
  grid-template-areas:
    "footer-left footer-mid footer-right";
  grid-area: footer-main;
  width: 1200px;
  margin: 50px auto 30px auto;
}

.footer-left {
  grid-area: footer-left;
  display: flex;
  justify-content: flex-end;
  align-items: flex-start;

  img {
    width: 100px;
  }
}

.footer-right {
  grid-area: footer-right;
  display: flex;
  flex-direction: column;
  color: #FFFFFF;
  justify-content: center;
  align-items: center;

  img {
    width: 90px;
  }

  label {
    margin-top: 10px;
    font-size: 12px;
  }
}

.footer-mid {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1.4fr 0.8fr 0.8fr;
  gap: 20px 0px;
  grid-template-areas:
    "mid1"
    "mid2"
    "mid3";
  grid-area: footer-mid;
  color: #FFFFFF;

  .mid-info {
    width: 60%;
  }

  a {
    color: #FFFFFF;
    text-decoration: none;
    position: absolute;
    right: 0;
  }
}

.mid1 {
  grid-area: mid1;
  font-size: 28px;
  font-weight: bold;
  letter-spacing: 3px;
  padding-bottom: 10px;
  border-bottom: 1px #BBBBBB solid;
}

.mid2 {
  grid-area: mid2;
  display: flex;
  flex-direction: row;
  position: relative;
}

.mid3 {
  grid-area: mid3;
  display: flex;
  flex-direction: row;
  position: relative;
}
</style>
